<script setup lang="ts">
import MTable from "@/components/MTable.vue";
import {getUserList} from "@/api/user";
import type {TableColumn} from "@/components/type/table";
import {reactive} from "vue";

const columns: TableColumn[] = [
  {
    prop: 'date',
    label: '日期',
    search: {
      isSearch: true,
      placeholder: '请输入日期',
      type: 'input'
    },
  },
  {
    prop: 'name',
    label: '姓名',
    search: {
      isSearch: true,
      placeholder: '请输入姓名',
      type: 'input'
    },
  },
  {
    prop: 'address',
    label: '地址',
    search: {
      isSearch: true,
      placeholder: '请输入地址',
      type: 'input'
    },
  },
  {
    prop: 'operator',
    label: '操作',
    slot: true,
  },
  {
    prop: 'form',
    label: 'test',
    slot: true,
  },
]
const form = reactive({
  id: '',
  testName: ''
})
const submit = (row: any) => {
  Object.assign(form, {
    id: row.id,
    testName: row.form
  })
  console.log(form)
}
</script>

<template>
  <MTable :columns="columns" :request="getUserList">
    <template #operator="{scope}">
      <el-button type="primary" >编辑</el-button>
      <el-button type="danger" >删除</el-button>
    </template>
    <template #form="{scope}">
      <el-input style="width: 100px" v-model="scope.row.form" ></el-input>
      <el-button type="primary" style="margin-left: 20px" @click="submit(scope.row)" >提交</el-button>
    </template>
  </MTable>
</template>

<style scoped>

</style>